<div ng-controller="SecurityGroupCtrl">
    <div class="row-fluid">
        <div class="span10">
            <div class="btn-toolbar server-btn-toolbar ui-toolbar">
                <button type="button" class="btn btn-mini" ng-click="do_add()">添加</button>
                <button type="button" class="btn btn-mini" ng-click="do_edit()">修改</button>
                <button type="button" class="btn btn-danger btn-mini" ng-click="do_delete()">删除</button>
            </div>
        </div>
        <div class="span2">
            <span>每页显示</span>
            <select class="input-mini" ng-model="page_size" ng-options="pz for pz in page_sizes" ng-change="change(page_size)">
            </select>
            <span>条</span>
        </div>
    </div>
    <table class="table table-striped table-bordered table-condensed">
        <thead>
        <tr>
            <th><input type="checkbox" ng-model="selected_all" /></th>
            <th>名称</th>
            <th>描述</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr selectable="security_group" ng-repeat="security_group in security_groups|activeitem" ng-click="bodyclick(security_group)">
            <td><input type="checkbox" value="{{security_group.id}}" ng-model="selected[security_group.id]" /></td>
            <td>{{security_group.name}}</td>
            <td>{{security_group.description}}</td>
            <td>
                <button class="btn btn-primary btn-mini" ng-click="related_vm(security_group)">关联</button>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination">
        <ul>
            <li ng-hide="should_hide()" ng-class="prev_class" ng-click="prev()"><a href="javascript:void(0);">上一页</a></li>
            <li ng-repeat="i in [] | range:page_count()" ng-hide="should_hide()" ng-click="page(i)" ng-class="(i == current_page) && 'active'">
                <a href="javascript:void(0)">{{i + 1}}</a>
            </li>
            <li ng-hide="should_hide()" ng-class="next_class" ng-click="next()"><a href="javascript:void(0);">下一页</a></li>
        </ul>
    </div>
</div>